<template>
  <div
    v-if="channel"
    class="app-container"
  >
    <page-header
      title="频道设置"
      desc="店铺商品限时折扣促销活动设置及管理"
      show-back
    >
      <div>
        <el-button
          size="small"
          plain
          @click="dialogFormVisible=true"
        >修改</el-button>
        <el-button
          v-if="!channel.deleted_at"
          size="small"
          plain
          @click="onDelete"
        >删除</el-button>
      </div>
    </page-header>

    <el-descriptions
      class="margin-top"
      :column="3"
      size="small"
      border
    >
      <el-descriptions-item
        v-for="(item,index) in channel.attributes"
        :key="index"
        :label="item.label"
      >
        <div v-html="item.value" />
      </el-descriptions-item>
      <el-descriptions-item label="ID">
        {{ channel.id }}
      </el-descriptions-item>
      <el-descriptions-item label="频道">
        {{ channel.name }} （{{ channel.title }}）
      </el-descriptions-item>
      <el-descriptions-item label="是否导航">
        <el-tag
          v-if="channel.nav"
          type="success"
          size="mini"
        >是</el-tag>
        <el-tag
          v-else
          type="danger"
          size="mini"
        >
          否
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="数据源类型">
        <el-tag
          :type="channel.source_type.class"
          size="mini"
        >{{ channel.source_type.label }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="频道状态">
        <el-tag
          v-if="!channel.deleted_at"
          :type="channel.status.class"
          size="mini"
        >{{ channel.status.label }}</el-tag>
        <el-tag
          v-else
          type="danger"
          size="mini"
        >
          已删除（{{ channel.deleted_at | asDatetime }}）
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ channel.created_at | asDatetime }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ channel.updated_at | asDatetime }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="!channel.sourceComponent"
        label="数据源关键字"
      >
        {{ channel.keyword }}
      </el-descriptions-item>
    </el-descriptions>
    <component
      :is="channel.sourceComponent"
      v-if="channel.sourceComponent"
      :primary-key="channel.id"
    />
    <!--触发的表单弹窗-->
    <el-dialog
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      title="频道信息修改"
      append-to-body
      destroy-on-close
    >
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <channel-form
          ref="dialogForm"
          :primary-key="channel.id"
          :action-visible="false"
          @submit="onRefresh"
        />
      </el-scrollbar>
      <template slot="footer">
        <el-button
          type="primary"
          @click="onDialogSubmit"
        >
          提交保存
        </el-button>
      </template>
    </el-dialog>
    <!--触发的表单弹窗-->
    <el-dialog
      v-if="dialogRelationVisible"
      :visible.sync="dialogRelationVisible"
      title="关联频道数据源"
      append-to-body
      destroy-on-close
    >
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <channel-form
          ref="dialogForm"
          :primary-key="channel.id"
          :action-visible="false"
          @submit="onRefresh"
        />
      </el-scrollbar>
      <template slot="footer">
        <el-button
          type="primary"
          @click="onDialogSubmit"
        >
          提交保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import PageHeader from '@/components/PageHeader'
import SourceBrandList from './components/SourceBrandList'
import SourceCategoryList from './components/SourceCategoryList'
import SourceGoodsList from './components/SourceGoodsList'
import ChannelForm from './components/StaffForm'
export default {
  components: {
    PageHeader,
    SourceBrandList,
    SourceCategoryList,
    SourceGoodsList,
    ChannelForm
  },
  data() {
    return {
      channel: null,
      drawer: false,
      loaded: false,
      dialogRelationVisible: false,
      dialogFormVisible: false
    }
  },
  computed: {
    channelId() {
      return this.$route.params.id
    },
    relationSourceName() {
      if (this.channel) {
        if (this.channel.source_type === 0) {
          return 'SourceGoods'
        } else if (this.channel.source_type === 1) {
          return 'SourceCategory'
        }
      }
      return ''
    }
  },
  watch: {},
  created() {
    this.onLoad()
  },
  mounted() {},
  methods: {
    onLoad() {
      this.$http.channel.view(this.channelId).then(res => {
        this.channel = res.data
      })
    },
    onRelation() {
      const { link } = this.channel.sourceButton
      if (link) {
        this.$router.push(link)
      }
    },
    onDelete() {
      this.$confirm('确认要删除当前频道？')
        .then(_ => {
          this.delete()
        })
        .catch(_ => {})
    },
    delete() {
      this.$http.channel.delete(this.channelId).then(res => {
        this.$router.replace({
          path: '/shop/channel/index'
        })
      })
    },
    onRefresh() {
      console.log('onRefresh')
      this.dialogFormVisible = false
      this.onLoad()
    },
    onDialogSubmit() {
      var $el = this.$refs
      if ($el.dialogForm) {
        $el.dialogForm.onSubmit()
      } else {
        console.log('refs:', $el)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.preview-drawer {
  .em-phone {
    width: 80%;
  }
  ::v-deep .el-drawer__body {
    display: flex;
    flex-direction: column;
  }
  &__actions {
    flex: 1;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
